<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章评论</title>
  </title>
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../font/iconfont.css">
  <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
  <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <script src="../../javaScript/wenzhangguanli/wenzhangpinglunshujui.js"></script>
  <link rel="stylesheet" href="../../css/wenzhangguanli/wenzhangpinlun.css">
  <script src="../../javaScript/public.js"></script>
  <!-- <script src="../../javaScript/orderform/orderformlist.js"></script> -->
  <style>

  </style>
</head>

<body>
  <div class="container nav_header">
    <div class="row">
      <div class="col-md-10 col-xs-10">
        <div class="row">
          <div class="col-md-3 col-xs-3">
            当前状态
            <select class="drop_down">
              <option value="">请选择当前状态</option>
              <option value="启用">启用</option>
              <option value="禁用">禁用</option>
            </select>
          </div>
          <div class="col-md-3 col-xs-3">
            评论时间
            <input type="date" placeholder="日期" class="drop_down" value="">
          </div>

          <div class="col-md-3 col-xs-3">
            用户昵称
            <input type="text" placeholder="用户昵称" class="drop_down" value="">
          </div>
          <div class="col-md-3 col-xs-3">
            评论内容
            <input type="text" placeholder="评论内容" class="drop_down" value="">
          </div>
        </div>
      </div>
      <div class="col-md-2 col-xs-2 content_right">
        <button class="sousuo"><span class="iconfont icon-sousuo"></span>搜索</button>
        <button class="chongzhi"><span class="iconfont icon-zhongzhizhongzhi"></span>重置</button>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-xs-10">
        <div class="row">
          <div class="col-md-1 col-xs-1">
            <span class="iconfont icon-shujukuliebiao">&nbsp;&nbsp;</span>数据列表
          </div>
          <div class="col-md-1 col-xs-1">
            <button class="shanchu"><span class="iconfont icon-shanchu"></span>删除</button>
          </div>
        </div>
      </div>
      <div class="col-md-2 content_right"> <button class=" xinzeng add"><span>+ </span>新增</button></div>
    </div>
    <table class="table table-striped mtable">
      <thead id="thead">
        <tr class="table_row mwidth">
          <th>
            <input type="checkbox" name="" id="check" class="box-checkbox">
          </th>
          <th>序号</th>
          <th>用户头像</th>
          <th>用户昵称</th>
          <th>评论内容</th>
          <th>点赞数</th>
          <th>评论时间</th>
          <th>当前状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody class="table_row table_content" id="mytable">

      </tbody>
    </table>
    <div class="row table_page">

      <div class="col-md-7 col-xs-7 xuanze">
        <input type="checkbox" class="box-checkbox quanxuan" value=""><span> 全选</span>
      </div>
      <nav aria-label="Page navigation" class="col-md-4 col-xs-4 fpagenum">
        <div class="back stop">
          <span class="iconfont">&#xe64b;</span>
        </div>
        <ul class="pagenum">

        </ul>
        <div class="next">
          <span class="iconfont">&#xe62b;</span>
        </div>
      </nav>
      <div class="col-md-1 col-xs-1 page_num">
        <ul name="" id="page_num">
          <li value="10">10条/页<span class="iconfont icon-arrow-down"></span></li>
          <li value="15">15条/页</li>
          <li value="20">20条/页</li>
          <li value="25">25条/页</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="modal fade madd" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content mout-content">
        <p><span>序号</span><input class="minput" placeholder=""></p>
        <p><span>用户头像</span><input class="minput" placeholder=""></p>
        <p><span>用户昵称</input></span><input class="minput" placeholder=""></p>
        <p><span>评论内容</span><textarea class="minput" placeholder=""></textarea></p>
        <p><span>点赞数</span><input class="minput" placeholder=""></input></p>
        <p><span>评论时间</span><input class="minput" placeholder=""></input></p>
        <p><span>当前状态</span><input class="minput" placeholder="开启或者关闭"></input></p>
        <p>
          <button class="mbutton-blue adds" data-dismiss="modal">确定</button>
          <button class="mbutton-white" data-dismiss="modal">取消</button>
        </p>
      </div>
    </div>
  </div>
  <div id="deltankuang">
    <div><span class="quxiao">X</span></div>
    <div>
      <span>？</span><span>&nbsp;&nbsp; 确定要删除当前数据吗？</span>
    </div>
    <div class="row del_xiugai">
      <div class="col-md-6 col-xs-6"></div>
      <div class="col-md-3 col-xs-3 queding"><button>确定</button></div>
      <div class="col-md-3 col-xs-3 quxiao"><button>取消</button></div>
    </div>
  </div>
  <script>
    let maxPage
    let qishi
    let dangqianye = 1
    // function showTable() {
    //   for (i = 0; i < comData.length; i++) {
    //     $('.table_content').append(`
    //             <tr>
    //                 <td>
    //                   <input type="checkbox" name="">
    //                 </td>
    //                 <td>${comData[i].id}</td>
    //                 <td class="icon_anniu"><img src="../../lib/img/tp.png" alt="" class="tupian">  </td>
    //                 <td>${comData[i].name}</td>
    //                 <td>${comData[i].cont}</td>
    //                 <td>${comData[i].zan}</td>
    //                 <td>${comData[i].time}</td>
    //                 <td class="icon_anniu"> <span class="iconfont icon-anniu_kaiqi"></span><span class="iconfont icon-anniu_guanbi"></span>   </td>
    //                 <td><span onclick="del()" class="btn_shanchu">删除</span></td>
    //             </tr>
    //             `)
    //   }
    // }
    // showTable()

    let nowpage = 1;
    let content = "`" +
      '<tr class="mwidth">' +
      '<td>' +
      '<input type="checkbox" id="" value="" class="box-checkbox">' +
      '</td>' +
      '<td>${comData[i].id}</td>' +
      '<td class="icon_anniu"><img src="../../lib/img/tp.png" alt="" class="tupian"> </td>' +
      '<td>${comData[i].name}</td>' +
      '<td>${comData[i].cont}</td>' +
      '<td>${comData[i].zan}</td>' +
      '<td>${comData[i].time}</td>' +
      '<td class="icon_anniu"> <span class="iconfont icon-anniu_kaiqi"></span><span class="iconfont icon-anniu_guanbi"></span>   </td>' +
      '<td><span onclick="del(this)" class="btn_shanchu"><a>删除</a></span></td></span>' +
      '</tr>' + '`'
    let pagecontent = "`" +
      "<li>" +
      "${i+1}" +
      "</li>"
      + "`"
    window.onload = function () {
      page(comData, ".mtable", 10, content, 1)
      pagenum(comData, ".pagenum", 10, pagecontent)
      ingo(comData, '.pagenum', ".mtable", 10, pagecontent, content)
      $('.icon-anniu_kaiqi').click(function () {
        $(this).css({
          display: 'none',
        })
        $(this).siblings().css({
          display: 'block',
        })
      })
      $('.icon-anniu_guanbi').click(function () {
        $(this).css({
          display: 'none',
        })
        $(this).siblings().css({
          display: 'block',
        })
      })
    }


    //全选按钮
    let checkedBoole
    $('.quanxuan').click(function () {
      if ($(this).prop('checked') == true) {
        $(".table_content input").prop("checked", true)
      } else {
        $(".table_content input").prop("checked", false)
      }
    })
    $('.table_content input').click(function () { //获取checked是否为选中
      console.log($("input[checkbox='false']"));
      console.log($("input[type='checkbox']"));
      if ($(this).prop('checked') == true) { //选中的时候执行这个结果
        $('.shanchu').click(function () {
          console.log($("input[checked='true']"));
        })

      } else { //未选中的时候执行这个结果
        checkedBoole = $(this).prop('checked')
        $('.shanchu').click(function () {
          console.log(11111)
        })

      }
    })







    //删除弹框
    function del(e) {
      let deltankuang = document.getElementById('deltankuang')
      deltankuang.style.display = 'block'
      $('.quxiao').click(function () {
        $("#deltankuang").css("display", 'none')
      })
      $('.queding').click(function () {
        $("#deltankuang").css("display", 'none')
        for (let i = 0; i < comData.length; i++) {
          if (comData[i].id == $($(e).parent().parent()).find('td')[1].innerHTML) {
            comData.splice(i, 1)
          }
        }
        init(comData, '.pagenum', ".mtable", parseInt($('#page_num').find("li").val()), pagecontent, content, 1)

      })

    }
    //重置
    $('.chongzhi').click(function () {
      $('#mytbody').html()
      page(comData, ".mtable", 15, content, 1)
      pagenum(comData, ".pagenum", 10, pagecontent)
      ingo(comData, '.pagenum', ".mtable", 15, pagecontent, content)
    })
    $('.bianji').click(function (params) {

    })

    //新增
    $('.xinzeng').click(function () {
      window.location.href = '../wenzhangguanli/xinzengwenzhang.html'
    })
    // //新增
    // window.onload = function () {
    //   $('.add').on('click', function () {
    //     $('.madd').modal('toggle')
    //   })
    //   allcheck()
    //   init(comData, '.pagenum', ".mtable", 10, pagecontent, content, 1)
    //   $('#page_num').on('change', function () {
    //     init(comData, '.pagenum', ".mtable", $(this).find("li").val(), pagecontent, content, 1)
    //   })
    //   remove(comData, '.pagenum', ".mtable", parseInt($('#page_num').find("li").val()), pagecontent, content, 1)
    //   $('.adds').on('click', function () {
    //     comData.push({
    //       "序号": l,
    //       "取消原因": $($('.mout-content>p').find('input')[0]).val(),
    //       "排序": $($('.mout-content>p').find('input')[1]).val(),
    //       "备注信息": $($('.mout-content>p').find('textarea')[0]).val(),
    //       "状态": ($($('.mout-content>p').find('input')[2]).val() == '开启') ? true : false
    //     })
    //     l++
    //     $($('.mout-content>p').find('input')[0]).val('')
    //     $($('.mout-content>p').find('input')[1]).val('')
    //     $($('.mout-content>p').find('textarea')[0]).val('')
    //     $($('.mout-content>p').find('input')[2]).val('')
    //     init(comData, '.pagenum', ".mtable", parseInt($('#page_num').find("li").val()), pagecontent, content, 1)
    //   })

    //   init(comData, '.pagenum', ".mtable", parseInt($('#page_num').find("li").val()), pagecontent, content, 1)
    // }
    // var ipts = document.querySelectorAll('tbody input');
    // // 获取tbody下的tr
    // var trs = document.querySelectorAll('tbody tr');
    // var iptsArray = Array.from(ipts);   // 把伪数组转换为真数组
    // // 点击全选选择所有的复选框
    // check.onclick = function () {
    //   if (this.checked) {
    //     for (let i = 0; i < ipts.length; i++) {
    //       ipts[i].checked = true;    //每个复选框设置为勾选状态
    //       trs[i].className = 'selected';    //增加class
    //     }
    //   } else {
    //     for (i = 0; i < ipts.length; i++) {
    //       ipts[i].checked = false;    //每个复选框设置为不勾选状态
    //       trs[i].className = '';    //删除class
    //     }
    //   }
    // }
    // // 单独的选中效果
    // for (let i = 0; i < ipts.length; i++) {
    //   ipts[i].onchange = function () {
    //     if (ipts[i].checked) {
    //       ipts[i].checked = true;
    //       trs[i].className = 'selected';
    //     } else {
    //       ipts[i].checked = false;
    //       trs[i].className = '';
    //     }
    //     // 全部选中
    //     var res1 = iptsArray.every(function (ele) {
    //       return ele.checked;
    //     })
    //     if (res1) {
    //       check.checked = true;
    //     }
    //     // 全部不选中
    //     var res2 = iptsArray.every(function (ele) {
    //       return !(ele.checked);
    //     })
    //     if (res2) {
    //       check.checked = false;
    //     }
    //     // 半选状态
    //     if (!res1 && !res2) {
    //       check.indeterminate = true;
    //     } else {
    //       check.indeterminate = false;
    //     }
    //   }
    // }
  </script>
</body>

</html>